<template>
  <div class="order-list">
    <!-- 查询信息输入框 -->
    <el-form ref="queryForm" :model="queryForm" label-width="80px">
      <el-form-item label="订单号">
        <el-input v-model="queryForm.orderNo" placeholder="订单号"></el-input>
      </el-form-item>
      <el-form-item label="收货人">
        <el-input v-model="queryForm.consignee" placeholder="收货人"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="queryForm.phone" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select v-model="queryForm.orderState" placeholder="订单状态">
          <el-option value="未受理"></el-option>
          <el-option value="已受理"></el-option>
          <el-option value="派送中"></el-option>
          <el-option value="已完成"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择时间">
        <el-date-picker
          v-model="queryForm.date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          placeholder="选择日期时间范围"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item class="query-btn">
        <el-button type="warning" @click="queryOrder">查询</el-button>
        <el-button type="danger" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      class="list-table"
      :data="tableData"
      border
      :style="{ width: tableWidth + 'px' }"
    >
      <el-table-column fixed prop="orderNo" label="订单号" width="150">
      </el-table-column>
      <el-table-column prop="orderTime" label="下单时间" width="200">
      </el-table-column>
      <el-table-column prop="phone" label="手机号" width="120">
      </el-table-column>
      <el-table-column prop="consignee" label="收货人" width="120">
      </el-table-column>
      <el-table-column prop="deliverAddress" label="配送地址" width="300">
      </el-table-column>
      <el-table-column
        prop="deliveryTime"
        label="送达时间"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="remarks"
        label="用户备注"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="orderAmount"
        label="订单金额"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="orderState"
        label="订单状态"
        width="120"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleView(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 3, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <el-dialog title="订单详情" :visible.sync="dialogFormVisible" class="dialog">
        <el-form :model="detailForm">
          <!-- 订单号 -->
      <el-form-item label="订单号:" prop="orderNo">
        <div>
            {{detailForm.orderNo}}
        </div>
      </el-form-item>
      <!-- 下单时间 -->
      <el-form-item label="下单时间:" prop="orderTime">
         <div>
            {{detailForm.orderTime}}
        </div>
      </el-form-item>

      <!-- 手机号 -->
      <el-form-item label="手机号:" prop="phone">
         <div>
            {{detailForm.phone}}
        </div>
      </el-form-item>

      <!-- 收货人 -->
      <el-form-item label="收货人:" prop="consignee">
        <div>
            {{detailForm.consignee}}
        </div>
      </el-form-item>

      <!-- 配送地址 -->
      <el-form-item label="配送地址:" prop="deliverAddress">
        <div>
            {{detailForm.deliverAddress}}
        </div>
      </el-form-item>

      <!-- 送达时间 -->
      <el-form-item label="送达时间:" prop="deliveryTime">
         <div>
            {{detailForm.deliveryTime}}
        </div>
      </el-form-item>

      <!-- 用户备注 -->
      <el-form-item label="用户备注:" prop="remarks">
        <div>
         {{detailForm.remarks}}
        </div>
      </el-form-item>

      <!-- 订单金额 -->
      <el-form-item label="订单金额:" class="order-money">
        <div>
         {{detailForm.orderAmount}}
        </div>
      </el-form-item>

      <!-- 订单状态 -->
      <el-form-item label="订单状态" prop="orderState">
        <div>
         {{detailForm.orderState}}
        </div>
      </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { orderList, getOrderDetail } from "@/api/order";

// 引入时间格式化工具函数
import { normalizeFullDate } from "@/utils/tools";
export default {
  data() {
    return {
      queryForm: {
        orderNo: "",
        consignee: "",
        phone: "",
        orderState: "",
        date: "",
      },
      tableData: [],
      currentPage: 1, //当前页数
      total: 20,
      pageSize: 5,
      tableWidth: 1200,
      dialogFormVisible: false,
      detailForm: {
          orderNo: '',
          orderTime: '',
          phone: '',
          consignee: '',
          deliverAddress: '',
          deliveryTime: '',
          remarks: '',
          orderAmount: '',
          orderState: ''
        },
        formLabelWidth: '120px'
    };
  },
  methods: {
    handleSize() {
      this.tableWidth = document.body.clientWidth - 240;
    },
    //   每页信息个数改变
    handleSizeChange(size) {
      this.pageSize = size;
      this.getOrderList(); //选中不同的页数时
    },
    //   当前页改变时触发
    handleCurrentChange(page) {
      this.currentPage = page; //当前页码改变的时候
      this.getOrderList();
    },
    // 查看
    async handleView(row) {
      this.dialogFormVisible = true

      try {
        let res = await getOrderDetail(row.id);
        let {data} = res.data

        data.orderTime = normalizeFullDate(data.orderTime);
        data.deliveryTime = normalizeFullDate(data.deliveryTime);

        this.detailForm = data
      }catch(err) {
        console.log(err)
      }
    },
    // 订单编辑按钮方法
    handleEdit(row) {
      console.log(row);
      this.$router.push({ path: "/order/order-edit", query: { id: row.id } });
    },
    async getOrderList() {
      try {
        let res = await orderList({
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          orderNo: this.queryForm.orderNo,
          consignee: this.queryForm.consignee,
          phone: this.queryForm.phone,
          orderState: this.queryForm.orderState,
          date: JSON.stringify(this.queryForm.date),
        });
        let { total, data } = res.data;

        // 处理格式
        data.forEach((item) => {
          item.orderTime = normalizeFullDate(item.orderTime);
          item.deliveryTime = normalizeFullDate(item.deliveryTime);
        });

        this.total = total;
        this.tableData = data;
      } catch (err) {
        console.log(err);
      }
    },
    queryOrder() {
      this.currentPage = 1;
      // 点击查询 获取列表
      this.getOrderList();
    },
    reset() {
      this.currentPage = 1
      this.queryForm = {};
      this.getOrderList()
    },
  },
  mounted() {
    window.addEventListener("resize", this.handleSize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleSize);
  },
  created() {
    this.getOrderList();
  },
};
</script>

<style lang="less" scoped>
.order-list {
  width: 100%;
  height: 100%;
  padding-top: 25px;
  background-color: #fff;

  /deep/ .el-form {
    display: flex;
    flex-wrap: wrap;
    

  }

  .query-btn {
    /deep/ .el-form-item__content {
      margin-left: 20px !important;
    }
  }

  .list-table {
    margin-top: 40px;
  }

  .pagination {
    margin-top: 20px;
  }
}

.dialog {
  /deep/.el-form-item {
    margin-bottom: 5px;
    width: 300px;
  }

}

</style>